<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Class Helper 示例</title>
    <link rel="stylesheet" href="src/styles/main.css">
    <link rel="stylesheet" href="src/styles/components.css">
    <link rel="stylesheet" href="src/styles/utilities.css">
</head>
<body>
    <div class="container">
        <h1>CSS Class Helper 插件示例</h1>
        
        <div class="section">
            <h2 class="abs ">按钮示例</h2>
            <p>在下面的按钮中，当你在class属性中输入"btn-"时，插件会提供自动补全建议：</p>
            
            <!-- 开发者说：在这些class属性中输入"btn-"前缀时，应该会看到自动补全建议 -->
            <button class="btn-primary ">主要按钮</button>
            <button class="btn-secondary">次要按钮</button>
            <button class="btn-success">成功按钮</button>
            <button class="btn-danger">危险按钮</button>
            <button class="btn-warning">警告按钮</button>
            <button class="btn-info">信息按钮</button>
            <button class="btn-light">浅色按钮</button>
            <button class="btn-dark">深色按钮</button>
        </div>

        <div class="section">
            <h2>文本颜色示例</h2>
            <p>在下面的文本中，当你在class属性中输入"text-"时，插件会提供自动补全建议：</p>
            
            <!-- 开发者说：在这些class属性中输入"text-"前缀时，应该会看到自动补全建议 -->
            <p class="text-primary">主要文本颜色</p>
            <p class="text-secondary">次要文本颜色</p>
            <p class="text-success">成功文本颜色</p>
            <p class="text-danger">危险文本颜色</p>
            <p class="text-warning">警告文本颜色</p>
            <p class="text-info">信息文本颜色</p>
            <p class="text-light">浅色文本颜色</p>
            <p class="text-dark">深色文本颜色</p>
            <p class="text-muted">静音文本颜色</p>
            <p class="text-white">白色文本颜色</p>
        </div>

        <div class="section">
            <h2>背景颜色示例</h2>
            <p>在下面的div中，当你在class属性中输入"bg-"时，插件会提供自动补全建议：</p>
            
            <!-- 开发者说：在这些class属性中输入"bg-"前缀时，应该会看到自动补全建议 -->
            <div class="bg-primary text-white p-3">主要背景</div>
            <div class="bg-secondary text-white p-3">次要背景</div>
            <div class="bg-success text-white p-3">成功背景</div>
            <div class="bg-danger text-white p-3">危险背景</div>
            <div class="bg-warning text-dark p-3">警告背景</div>
            <div class="bg-info text-white p-3">信息背景</div>
            <div class="bg-light text-dark p-3">浅色背景</div>
            <div class="bg-dark text-white p-3">深色背景</div>
        </div>

        <div class="section">
            <h2>边框示例</h2>
            <p>在下面的div中，当你在class属性中输入"border-"时，插件会提供自动补全建议：</p>
            
            <!-- 开发者说：在这些class属性中输入"border-"前缀时，应该会看到自动补全建议 -->
            <div class="border border-primary p-3">主要边框</div>
            <div class="border border-secondary p-3">次要边框</div>
            <div class="border border-success p-3">成功边框</div>
            <div class="border border-danger p-3">危险边框</div>
            <div class="border border-warning p-3">警告边框</div>
            <div class="border border-info p-3">信息边框</div>
            <div class="border border-light p-3">浅色边框</div>
            <div class="border border-dark p-3">深色边框</div>
            <div class="border border-white p-3">白色边框</div>
        </div>

        <div class="section">
            <h2>使用说明</h2>
            <ol>
                <li>确保在.vscode/settings.json中配置了css.helper.prefix和css.helper.styleSheets</li>
                <li>在HTML文件的class属性中输入配置的前缀（如"btn-"、"text-"、"bg-"等）</li>
                <li>插件会自动提供匹配的CSS类名建议</li>
                <li>选择建议的类名即可完成输入</li>
            </ol>
        </div>
    </div>
</body>
</html>
